<template>
    <div class="box">
        <h2>Child1组件 - 模块化</h2>
        <div>count: {{ $store.state.test.count }}</div>
        <div>count: {{ count }}</div>
        <div>tenflodCount: {{ $store.getters.tenflodCount }}</div>
        <div>tenflodCount: {{ tenflodCount }}</div>
        <button @click="$store.dispatch('increment', 3)">actions修改count</button>
        <button @click="increment(4)">actions修改count</button>
        <br>
        <button @click="$store.commit('ADD', 5)">mutations修改count</button>
        <button @click="ADD(6)">mutations修改count</button>
    </div>
</template>

<script>
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
export default {
    name: "Child1",
    computed: {
        ...mapState({
            count: state => state.test.count
        }),
        ...mapGetters(['tenflodCount'])
    },
    methods: {
        ...mapActions(['increment']),
        ...mapMutations(['ADD'])
    }
};
</script>

<style scoped>
</style>
